<script> 
    /* when document is ready */
    $(function() {
        /* initiate plugin */
        $("div.holder").jPages({
            containerID: "itemContainer"
        });
    });
</script>
<div class="well">
    <ul id="itemContainer" class="list-no-bullet">
        <?php
        $articles = new Models_Articles();
        $content = $articles->getAllArticles();
        $news = new Models_News();
        foreach ($content as $value)
        {
            $value['body'] = strip_tags($value['body']);
            $value['body'] = $news->getMiniature($value['body'], 500);
            $countComment = $articles->countComment($value['id']);
            ?>
                <li>
                    <div class="well">
                        <h4><a href="/<?php $articles->printPath(); ?>articles/show/<?php echo $value['id'];?>"><?php echo $value['title']; ?></a></h4>
                        <?php echo $value['body']; ?>
                        <hr />
                            <p class="" style="padding: 1px 1px; margin: -5px 0;;">
                                   <i class="icon-calendar"></i> <?php echo $value['modified']; ?>
                                  | <span class="label label-success"><i class="icon-comment icon-white"></i> <?php echo $countComment['count(id)']; ?></span>
                                  | <i class="icon-tags"></i> Tags : <a href="#"><span class="label label-info">Snipp</span></a> 
                                <a href="#"><span class="label label-info">Bootstrap</span></a> 
                                <a href="#"><span class="label label-info">UI</span></a> 
                            </p>
                    </div>
                </li>
             <?php
        }
        ?>
    </ul>
     <!-- navigation panel -->
    <div class="holder pagination">
        <ul>
            <li><a class="jp-previous jp-disabled">← previous</a></li>
            <li><a class="jp-current">1</a></li>
            <li><span class="jp-hidden">...</span></li>
            <li> <a>2</a></li>
             <li><a>3</a></li>
             <li><a>4</a></li>
             <li><a>5</a></li>
             <li><a class="jp-hidden">6</a></li>
             <li><a class="jp-hidden">7</a></li>
             <li><a class="jp-hidden">8</a></li>
             <li><a class="jp-hidden">9</a></li>
             <li><span>...</span></li>
             <li><a>10</a></li>
            <li><a class="jp-next">next →</a></li>
        </ul>
    </div>    
</div>
